<template>
  <div>
    <h1>attrs-listeners</h1>
    <my-input-1 required placeholder="22222" class="test" data-test="test" />
    <my-input-2 required placeholder="22222" class="test" data-test="test" />
    <my-input-3
      required
      placeholder="22222"
      class="test"
      data-test="test"
      @focus="onFocus"
      @input="onInput"
    />
    <my-input-4
      required
      placeholder="22222"
      class="test"
      data-test="test"
      @focus="onFocus"
      @input="onInput"
    />
  </div>
</template>

<script>
import myInput1 from "./myInput1.vue";
import myInput2 from "./myInput2.vue";
import myInput3 from "./myInput3.vue";
import myInput4 from "./myInput4.vue";
export default {
  components: {
    myInput1,
    myInput2,
    myInput3,
    myInput4
  },
  methods: {
    onFocus(e) {
      console.log(e);
    },
    onInput(e) {
      console.log(e.target.value);
    }
  }
};
</script>
